<html>
<head>
    <title>Rise Player Configuration</title>
    <script type="text/javascript">

        function save() {
            resetStatus();
            var server = "production";
            if (document.getElementById("rbProduction").checked) {
                server = "production";
            } else if (document.getElementById("rbTest").checked) {
                server = "test";
            }
            var displayId = document.getElementById("displayId").value;
            var claimId = document.getElementById("claimId").value;

            var playerUrl = "http://localhost:9449/save_property?restart_viewer=true&display_id=" + displayId + "&claim_id=" + claimId + "&server=" + server;
            var xhr = new XMLHttpRequest();
            xhr.onload = onSuccess;
            xhr.onerror = onFailure;
            xhr.onError = onSuccess;
            xhr.open("GET", playerUrl, false); //IMPORTANT! synchronous request
            xhr.send();
        }

        function reset() {
            resetStatus();

            var playerUrl = "http://localhost:9449/clear";
            var xhr = new XMLHttpRequest();
            xhr.onload = onSuccess;
            xhr.onerror = onFailure;
            xhr.onError = onSuccess;
            xhr.open("GET", playerUrl, false); //IMPORTANT! synchronous request
            xhr.send();
        }

        function load() {
            resetStatus();
            var server = "[SERVER]";
            if (server == "test") {
                document.getElementById("rbTest").checked = true;
            } else {
                document.getElementById("rbProduction").checked = true;
            }
        }

        function onSuccess(xhrProgressEvent) {
            var xhr = xhrProgressEvent.target;
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    document.getElementById("statusOK").style.display = "block";
                } else {
                    document.getElementById("statusError").style.display = "block";
                }
            }
        }

        function onFailure() {
            document.getElementById("statusError").style.display = "block";
        }

        function resetStatus() {
            document.getElementById("statusOK").style.display = "none";
            document.getElementById("statusError").style.display = "none";
        }

    </script>
</head>
<body style="margin: 0px;" onload="load()">
    <h1>
        Rise Player Configuration</h1>
    <div id="statusOK" style="background-color:#0CFF0C; width:200px; text-align:center; display:none;">Success</div>
    <div id="statusError" style="background-color:Red; width:200px; text-align:center; display:none;">Failure</div>
    <table cellpadding="5" cellspacing="0" >
        <tr>
            <td>
                Display ID:
            </td>
            <td>
                <input id="displayId" type="text" value="[DISPLAY_ID]" />
            </td>
        </tr>
        <tr>
            <td>
                Claim ID:
            </td>
            <td>
                <input  id="claimId" type="text" value="[CLAIM_ID]" />
            </td>
        </tr>
        <tr>
            <td valign="top">
                Server:
            </td>
            <td>
                <input id="rbProduction" type="radio" name="server" value="Production" checked="checked" />Production<br />
                <input id="rbTest" type="radio" name="server" value="Test" />Test<br />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td style="padding-top:10px">
            <button onclick="save()">Apply</button>
            <button onclick="reset()">Reset</button>
            </td>
        </tr>
    </table>
</body>
</html>
